<docs>
  ## 上传头像
</docs>
<template>
  <div class="wrap">
    <my-bread class title="图片上传"></my-bread>
    <div class="touxiang tem_comm">
      <div>
        <img class="images" :src="imgSrc" alt />
      </div>
    </div>
    <div v-if="imgLen>=2 ? false : true" class="weui-uploader__input-box">
      <input
        id="uploadFile"
        class="weui-uploader__input"
        type="file"
        accept="image/*"
        @change="upload()"
        ref="inputer"
        multiple
      />
    </div>
    <div class="txt">大小不超过1M</div>
  </div>
</template>
<script>
import $ from "@/common/js/axios";

export default {
  name: "uploadPic",
  components: {},
  data() {
    return {
      imgs: {}, //没用
      imgLen: 0, //图片长度；
      entity: {
        cardid_photo: [],
        vcode: ""
      },
      sfzhm: "",
      xm: "",
      changFlag: 1
    };
  },
  computed: {
    imgSrc() {
      /* eslint-disable no-undef */
      return `${conf.urlPrefix}/grgl/tpxxCx?changflag=` + this.changFlag + 1;
    }
  },
  methods: {
     upload () {
      var that = this;
      const file = this.$refs.inputer.files[0];
      var size = file.size;
      if (size > 1*1024*1024) {
        that.$toast('请选择1M以内的图片！');
        return false
      }
      var reader = new FileReader();
      reader.readAsDataURL(file);
      var imgcode;
      reader.onload = function(e) {
        // 读取到的图片base64 数据编码 将此编码字符串传给后台即可
        imgcode = e.target.result;
        var x = imgcode.indexOf(",");
        imgcode = imgcode.slice(x + 1);
        that.$loading = true;
        that.$http
          .post("/grgltp/tpxxBc", {
            xm: that.xm,
            sfzhm: that.sfzhm,
            tpxx: imgcode
          })
          .then(res => {
            const resData = res.returnData;
            that.$alert(resData.message, () => {
              const code = +resData.executeResult;
              // if (code) {
              //   that.$router.push({
              //     path: "/person/user",
              //     query: { changFlag: that.changFlag }
              //   });
              // }
            });
          })
          .finally(() => {
            that.$loading = false;
          });
      };
    },
    //删除上传的照片；
    // delImg: function(key) {
    //   this.$delete(this.entity.cardid_photo, key);
    //   this.imgLen--;
    //   this.entity.cardid_photo = this.entity.cardid_photo;
    // }
  },
  created() {
    var data = this.$route.query;
    this.changFlag = this.$route.query.changFlag + 1;
    this.sfzhm = data.sfzhm;
    this.xm = data.xm;
    // Object.keys(this.form).forEach(item => {
    //   this.form[item] = data[item];
    // });
  }
};
</script>
<style scoped lang="scss">
@import "~common/scss/var.scss";
.wrap {
  .txt {
    text-align: center;
  }

  .touxiang {
    height: 289px;
    border-bottom: 1px solid #dbdbdb;
    div {
      width: 160px;
      margin: 0 auto;
      .images {
        width: 160px;
        height: 160px;
        display: inline-block;
        vertical-align: middle;
        margin: 34px auto;
      }
    }
    p {
      font-size: 30px;
      text-align: center;
      color: $color-text-title;
    }
  }
}
</style>
